<template>
	<view>
		<view class="header-comp">
			<view class="header">
				<view class="header-bar">
					<view class="fill-height el-flex">
						<view class="header-btn2" @click="Back()">
							<image src="../../static/images/left_b.png" mode=""></image>
						</view>
						<view class="placeholder text-ellipsis">
							收货地址
						</view>
						<view class="app-header-right"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="app-view">
			<view class="page-wrap">
				<view class="address-manager">
					<view class="address-manager-list">
						<view class="ui-card" v-for="(item,index) in newAddressList" :key="index"
							@click="getAddressItem(index)">
							<view class="ui-card-item ui-list">
								<view class="ui-list-item identity">
									<text class="consignee">{{item.consignee}}</text>
									<text>{{item.tel}}</text>
									<text class="em" v-if="item.is_default">默认</text>
								</view>
								<view class="ui-list-item edit">
									<view class="p">
										{{item|city}}
									</view>
									<view class="p">
										{{item.address}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="add maxW el-flex">
				<view class="btn btn-gradient" @click="toAddressEdit">
					+ 新建收货地址
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: []
			};
		},
		computed: {
			newAddressList() {
				let list = this.addressList
				list.unshift(...list.splice(list.findIndex(i => i
					.is_default), 1))
				return list;
			}
		},
		methods: {
			toAddressEdit() {
				uni.navigateTo({
					url: '/subPage/addressEdit/addressEdit'
				})
			},
			Back() {
				uni.navigateBack(-1)
			},
			getAddressItem(index) {
				for (var i = 0; i < this.addressList.length; i++) {
					if (i == index) {
						this.$set(this.addressList[i], 'is_default', true)
					} else {
						this.$set(this.addressList[i], 'is_default', false)
					}
				}
				uni.setStorageSync('checkout_address',this.addressList)
				uni.navigateBack(-1)
			}
		},
		filters: {
			city: function(obj) {
				if (obj.address) {
					return obj.province + ' ' + obj.city + ' ' + obj.district + ' ' +
						obj.area;
				}
			},
		},
		onShow() {
			uni.$on('addSuccess', () => {
				let address_item = uni.getStorageSync('checkout_address')
				if (!address_item || address_item.length === 0) {
					return;
				} else {
					this.addressList = address_item

				}
			})
			let address_item = uni.getStorageSync('checkout_address')
			if (!address_item || address_item.length === 0) {
				return;
			} else {
				this.addressList = address_item
			}
		},
		onUnload() {
			uni.$off('addSuccess')
		},
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.header {
		height: .96rem;
		background-color: rgb(242, 242, 242);


		.header-bar {
			height: 100%;
		}

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(0, 0, 0);
			}
		}
	}

	.app-view {
		padding-top: .96rem;

		.page-wrap {
			.address-manager {
				position: relative;
				padding-bottom: 1rem;

				.address-manager-list {

					.ui-card {
						overflow: hidden;
						background: #fff;
						text-align: left;
						padding: 0 0.32rem;

						.ui-card-item {}

						.ui-list {
							position: relative;
							padding: 0.23rem 0;
							border-bottom: 0.01rem solid rgba(0, 0, 0, .1);

							.ui-list-item {
								display: block;
								font-size: .28rem;
								overflow: hidden;
								background: #fff;
							}

							.identity {
								margin-bottom: 0.03rem;
								line-height: .43rem;

								.consignee {
									margin-right: 0.16rem;
									color: #000;
									font-size: .32rem;
								}

								text {
									vertical-align: middle;
									color: rgba(0, 0, 0, .87);
								}

								.em {
									color: #fff;
									display: inline-block;
									padding: 0.03rem 0.06rem;
									font-size: .2rem;
									font-style: normal;
									margin-left: 0.22rem;
									background-color: #ff5934;
									border-radius: 0.04rem;
									line-height: .2rem;
								}
							}

							.edit {
								position: relative;
								padding-right: 0.5rem;
								font-size: .24rem;

								&:after {
									content: " ";
									position: absolute;
									width: 0.14rem;
									height: 0.14rem;
									right: 0.14rem;
									top: 50%;
									margin-top: -0.07rem;
									border-right: 1px solid #999;
									border-bottom: 1px solid #999;
									-webkit-transform: rotate(-45deg);
								}

								.p {
									font-size: .24rem;
									color: rgba(0, 0, 0, .5);
									line-height: .32rem;
								}
							}
						}
					}
				}
			}
		}

		.add {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			z-index: 1;
			padding: 0.12rem 0.32rem;

			.btn-gradient {
				display: inline-block;
				height: 0.72rem;
				line-height: .72rem;
				background: linear-gradient(46deg, #ff7d00, #ff5934);
				border-radius: 0.4rem;
				width: 100%;
				font-size: .3rem;
				font-weight: 700;
				color: #fff;
				text-align: center;
			}
		}
	}
</style>